<template>

	<van-popup v-model:show="state.isShow" class="w-full" style="height: 100%" position="right">
		<div class="page">
			<global-header title="回水比例" @back="state.isShow = false" />

			<van-field label="是否开启特殊回水" label-width="200px">
				<template #input>
					<div class=" flex-1 row justify-end">
						<van-switch v-model="state.isSpecialBackwater" :active-value="1" :inactive-value="2" active-color="#3976CC"
							inactive-color="#888" />
					</div>
				</template>
			</van-field>
			<main v-if="state.isSpecialBackwater === 2" class="page-main bg-white">

			</main>
			<template v-else-if="state.isSpecialBackwater === 1">

				<van-field v-model="state.all" label="批量修改" type="digit" @change="handleMaster">
					<template #right-icon>
						%
					</template>
				</van-field>


				<div class="bg-white mt-[10px] list-header ">
					<div class="row-start-center text-[14px] text-[#888] py-[12px] px-[15px]"
						style="border-bottom: 1px solid #e4e4e4">
						<div class="flex-1 text-left">游戏名称</div>
						<div class="w-[25%] text-center">返佣比例</div>
					</div>
				</div>
				<main class="page-main bg-white">
					<div v-for="(item, index) in state.list" :key="index"
						class="row-start-center text-[14px] text-[#888] py-[12px] px-[15px]"
						style="border-bottom: 1px solid #e4e4e4">
						<div class="flex-1 text-left">{{ item.LotteryName }}</div>
						<div class="w-[25%] text-center !bg-[#F1F4FB] truncate">
							<van-field v-model="item.BackRate" class="!px-[6px] !py-[4px]" input-align="center" label-width="0"
								type="digit">
								<template #right-icon>
									%
								</template>
							</van-field>
						</div>
					</div>
				</main>

			</template>
			<span class=" text-red-600  bg-white px-[12px] py-[6px]">未开启特殊回水时，默认系统回水</span>
			<div class="p-[15px] bg-[#FFFFFF]">
				<div class="flex gap-[10px]">
					<van-button @click="closed" class="!flex-1 !bg-[#CDD9EE] !text-[#3976CC] rounded-[5px]" block>
						取消
					</van-button>
					<van-button @click="confirm()" class="!flex-1 !bg-[#3976CC] !text-[#FFFFFF]  rounded-[5px]" block>
						保存设置
					</van-button>
				</div>
			</div>
		</div>

	</van-popup>
</template>
<script setup lang="ts">
import { reactive, defineProps, defineEmits } from "vue";
import { debounce } from "lodash-es";
import { reqUserBackWaterBatch, reqUserBackWaterSetting } from "@/api/user";
import { toast } from "@/utils/toast";

type State = {
	loading: boolean;
	updating: boolean;
	isShow: boolean;
	isSpecialBackwater: number;
	all: number;
	list: BackWaterSettingMo["GameConfig"];
};

const props = defineProps({
	username: {
		type: String,
		default: ""
	},
	uid: {
		type: Number,
		default: 0
	},
	isSpecialBackwater: {
		type: Number,
		default: 0
	}
});

const state = reactive<State>({
	loading: false,
	updating: false,
	isShow: false,
	isSpecialBackwater: 1,
	all: 0,
	list: []
});
const emit = defineEmits(["update"]);

const getData = async () => {
	try {
		state.loading = true;
		const res = await reqUserBackWaterSetting(props.uid);
		state.list = res.data.GameConfig.map(item => {
			return {
				...item,
				Type: item.Type || 1
			};
		});
		state.isSpecialBackwater = res.data.IsSpecialBackwater;
		state.loading = false;
	} catch (error) {
		state.loading = false;
		console.log(error);
	}
};

const handleMaster = (val: number) => {
	state.list.forEach(item => {
		item.BackRate = val;
	});
};

const closed = () => {
	state.isShow = false;
	state.all = 0;
};

const confirm = debounce(
	async () => {
		state.updating = true;
		try {
			await reqUserBackWaterBatch({
				UserId: props.uid,
				IsSpecialBackwater: state.isSpecialBackwater,
				List: state.list.map(item => {
					return {
						LotteryId: item.LotteryId,
						BackRate: Number(item.BackRate),
						Type: item.Type
					};
				})
			});
			state.updating = false;
			toast.success("修改回水比例成功");
			emit("update");
			closed();
		} catch (error) {
			state.updating = false;
			console.log(error);
		}
	},
	500,
	{ leading: true, trailing: false }
);

const open = () => {
	state.isShow = true;
	state.isSpecialBackwater = props.isSpecialBackwater;
	getData();
};

defineExpose({
	open
});
</script>
<style lang="scss" scoped></style>
